<template>
  <div class="mc-main">
    <UserCenter />
    <ul class="lsnone sc-display pbm0 mgt20p">
      <li
        v-for="(item, index) in state.tabList"
        :key="index"
        :class="[
          'lsnone',
          'dp-ib',
          'pbm0',
          'w80p',
          'h40p',
          'lh-40p',
          item.en === state.currentTab ? 'bc1' : 'bc3',
        ]"
        @click="fnChangeTab(item.en)"
      >
        {{ item.name }}
      </li>
    </ul>
    <keep-alive>
      <component
        v-bind:is="currenTab"
        @question-detailm="fnViewQuestion"
      ></component>
    </keep-alive>
  </div>
</template>

<script>
import { reactive, computed } from "vue";
import UserCenter from "./UserCenter.vue";
import MyTabwait from "./MyTabWait.vue";
import MyTabyes from "./MyTabYes.vue";
import MyTabon from "./MyTabOn.vue";

export default {
  // 子组件
  components: {
    UserCenter,
    MyTabwait,
    MyTabyes,
    MyTabon,
  },
  // 父组件传值
  props: {
    msg: Object,
  },
  // 钩子
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      currentTab: "wait",
      tabList: [
        { id: "1", name: "待审核", en: "wait" },
        // { id: "2", name: "有疑点", en: "on" },
        // { id: "2", name: "改数据", en: "yes" },
      ],
    });
    // 内容切换
    const currenTab = computed(() => {
      return "MyTab" + state.currentTab;
    });
    // tab切换
    const fnChangeTab = (val) => {
      state.currentTab = val;
    };
    // 查看问题
    const fnViewQuestion = (val) => {
      emit("view-question", val);
    };
    // 传入模板
    return {
      state,
      currenTab,
      fnChangeTab,
      fnViewQuestion,
    };
  },
};
</script>

<style scoped>
.mc-main {
  width: 100%;
  min-height: 300px;
}
.mc-main ul {
  border-bottom: 5px solid rgba(29, 96, 151, 0.45);
}
.mc-main li:hover {
  cursor: pointer;
}
</style>
